<!DOCTYPE HTML PUBLIC>
<html>
	<head>
		<meta charset="utf-8">
		<title>testImg</title>
		<style type="text/css">
			body {
				margin: 0px;
				background: #f2f2f0;
			}

			p {
				margin: 0px;
			}

			.title {
				color: #5500ff;
				background: #ffffff;
				text-align: center;
				font-size: 24px;
				line-height: 50px;
				font-weight: bold;
			}

			.file {
				position: absolute;
				width: 100%;
				font-size: 90px;
			}

			.filebtn {
				display: block;
				position: relative;
				height: 110px;
				color: #FFFFFF;
				background: #06980e;
				font-size: 48px;
				line-height: 110px;
				text-align: center;
				cursor: pointer;
				border: 3px solid #cccccc;
			}

			.filebtn:hover {
				background: #04bc0d;
			}

			.showimg {
				margin: 10px auto 10px auto;
				-webkit-transition: all .3s;
				transition: all .3s;
			}

			.showimg span {
				width: 1px;
				height: 1px;
				display: block;
				margin: -1px 0px 0px -1px;
			}

			.css_code {
				margin: 10px;
				padding: 10px;
				display: none;
				border: 1px solid #FFCC00;
				font-size: 12px;
				background: #F1F1F1;
				white-space: pre-wrap;
				word-wrap: break-word;
				height: 300px;
				overflow: auto;
			}

			.css_code:hover {
				background: #DEFEDE;
			}

			tr,
			table {
				/* border: 1px solid #000000; */
				border-collapse: collapse;
			}

			td {
				/* border: 1px solid #000000; */
				border-collapse: collapse;
				height: 20px;
				width: 20px;
			}
		</style>

		<!-- <script src="./js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

		<script type="text/javascript">
			console.log("sweetCat版权所有!");
			var arrbox = [];
			var arrbox_send = [];
			window.onload = function() {

				var canvas = document.createElement('canvas'); //建立绘图面板
				var context = canvas.getContext('2d'); //导出一个二维绘图 API

				document.getElementById('img_input').onchange = function() {
					var img = event.target.files[0];

					// 检查能否读取图片 
					if (!img) {
						return;
					}

					// 检查图片类型 
					if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {
						alert('图片只能是jpg,gif,png');
						return;
					}

					// 检查图片尺寸 
					if (img.size > 120 * 1024) {
						alert('图片不能大于120K');
						return;
					}

					// 开始读文件 
					var reader = new FileReader();
					reader.readAsDataURL(img);

					reader.onload = function(e) { //当文件的确完毕

						var image = new Image();
						image.src = e.target.result;

						image.onload = function() { // image onload start 

							var img_width = this.width;
							var img_height = this.height;
							console.log(img_width);
							console.log(img_height);
							if (img_width != 8 || img_height != 8) {
								alert("图片尺寸不正确!任务终止!");
								return;
							}
							// 设置画布尺寸 
							canvas.width = img_width;
							canvas.height = img_height;

							// 将图片按像素写入画布 
							context.drawImage(this, 0, 0, img_width, img_height);

							// 读取图片像素信息 
							var imageData = context.getImageData(0, 0, img_width, img_height);
							// console.log(imageData);
							var length = imageData.data.length;

							// 生成box-shadow 
							for (var i = 0; i < length; i++) {

								if (i % 4 === 0) { // 每四个元素为一个像素数据 r,g,b,alpha 

									var x = i / 4 % img_width + 1; // 横坐标 
									var y = Math.floor(i / 4 / img_width) + 1; // 纵坐标 
									var alpha = Math.round(imageData.data[i + 3] / 255 * 100) / 100; // alpha 值 

									if (imageData.data[i + 3] == 255) { // 没有alpha 值 
										// var hex = gethex(imageData.data[i], imageData.data[i + 1], imageData
										// 	.data[i + 2]);
										// arrbox.push(x + 'px ' + y + 'px #' + hex);
										var rgba = imageData.data[i] + ',' + imageData.data[i + 1] + ',' +
											imageData.data[i + 2];
										arrbox.push('rgba(' + rgba + ')');
										arrbox_send.push(rgba);
									} else if (alpha > 0) { // 有alpha 值 
										var rgba = imageData.data[i] + ',' + imageData.data[i + 1] + ',' +
											imageData.data[i + 2] + ',' + alpha;
										arrbox.push(x + 'px ' + y + 'px rgba(' + rgba + ')');
									}

								}
							}
							// console.log(arrbox);
							// console.log($("#img"));
							//添加dom元素
							for (var i = 0; i < 8; i++) {
								$("#img").append("<tr></tr>");
								for (var j = 0; j < 8; j++) {
									$("#img tr").eq(i).append("<td></td>");
								}
							}

							for (var i = 0; i < 64; i++) {
								$("#img td").eq(i).css("background-color", arrbox[i]);
							}
							$("#sbu_cen").css("display", "block");
							$("#chooseImg").css("display", "none");
						}
					}
				}

			}

			function sub() {
				$("#sub").attr("disabled", true);
				$("#success").css("display", "none");
				$("#error").css("display", "none");
				
				var sendData="";
				for(var i=0;i<64;i++){
					sendData+=arrbox_send[i];
					sendData+="@";
				}
				
				console.log(sendData);
				$.ajax({
					type: "POST",
					url: "/updata",
					data: {
						imgData: sendData
					},
					success: function(data) {
						$("#success").css("display", "block");
					},
					error: function(data) {
						$("#error").css("display", "block");
						$("#sub").attr("disabled", false);
						alert("服务器错误/网络连接超时,请重新提交，如多次提交失败建议稍后再试/联系技术@sweetCat");
					}
				});
			}
		</script>

	</head>

	<body>
		<center><h3>sta模式</h3></center>
		
		<p id="chooseImg">
			<input type="file" class="file" id="img_input" style="display: none;">
			<label class="filebtn" for="img_input" title="JPG,GIF,PNG" style="">选择图片</label>
		</p>
		<center>
			<table id="img"></table>
		</center>

		<center id="sbu_cen" style="display: none;">
			<input type="button" name="" id="sub" value="提交" onclick="sub()" />
			<input type="button" name="" id="refresh" value="重新选择" onclick="window.location.reload()" />
		</center>
		<center id="success" style="display: none;">
			<h3 style="color: #04BC0D;">提交成功</h3>
		</center>
		<center id="error" style="display: none;">
			<h3 style="color: #FF0000;">提交失败</h3>
		</center>
	</body>
</html>
